<template>
  <div>
    <app-container>
      <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData"/>
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </app-container>
    <app-container>
      <generate-table ref="generateTable" :data="jsonData1" :remote="remoteFuncs" :value="editData">
        <!--自定义新增编辑页面内容-->
        <!--<template slot="table_dialog" slot-scope="scope">-->
        <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
        <!--</template>-->
      </generate-table>
    </app-container>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'CreateFromSetname',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'input', 'name': '产品代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1541729616000_24422' }, 'key': '1541729616000_24422', 'model': 'input_1541729616000_24422', 'rules': [{ 'type': 'string', 'message': '产品代码格式不正确' }] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '产品名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1541729618000_46002' }, 'key': '1541729618000_46002', 'model': 'input_1541729618000_46002', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'input', 'name': '币种', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1541729621000_6853' }, 'key': '1541729621000_6853', 'model': 'input_1541729621000_6853', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'select', 'name': '产品类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'func_1541729623000_63609' }, 'key': '1541729623000_63609', 'model': 'select_1541729623000_63609', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1541729358000_99769' }, 'key': '1541729358000_99769', 'model': 'grid_1541729358000_99769', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 6, 'list': [{ 'type': 'select', 'name': '产品状态', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'func_1541729626000_87648' }, 'key': '1541729626000_87648', 'model': 'select_1541729626000_87648', 'rules': [] }] }, { 'span': 6, 'list': [{ 'type': 'select', 'name': '产品定活标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'func_1541729628000_93966' }, 'key': '1541729628000_93966', 'model': 'select_1541729628000_93966', 'rules': [] }] }, { 'span': 6, 'list': [] }, { 'span': 6, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1541729362000_83988' }, 'key': '1541729362000_83988', 'model': 'grid_1541729362000_83988', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      jsonData1: { 'list': [{ 'type': 'input', 'name': '产品编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540366502000_92655' }, 'key': '1540366502000_92655', 'model': 'input_1540366502000_92655', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }, { 'type': 'input', 'name': '产品说明', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540366506000_42897' }, 'key': '1540366506000_42897', 'model': 'input_1540366506000_42897', 'rules': [] }, { 'type': 'date', 'name': '生效日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1540366510000_16994' }, 'key': '1540366510000_16994', 'model': 'date_1540366510000_16994', 'rules': [] }, { 'type': 'select', 'name': '产品定活标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'chanpindinghuobiaozhi' }, 'key': '1540366520000_27179', 'model': 'select_1540366520000_27179', 'rules': [] }, { 'type': 'select', 'name': '产品类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'chanpinleixing' }, 'key': '1540366525000_56398', 'model': 'select_1540366525000_56398', 'rules': [] }, { 'type': 'select', 'name': '产品适用币种', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'chanpinshiyongbizhong' }, 'key': '1540366534000_49792', 'model': 'select_1540366534000_49792', 'rules': [] }, { 'type': 'select', 'name': '产品状态', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'chanpinzhuangtai' }, 'key': '1540366541000_4020', 'model': 'select_1540366541000_4020', 'rules': [] }, { 'type': 'select', 'name': '存款种类', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'cunkuanzhonglei' }, 'key': '1540366549000_27533', 'model': 'select_1540366549000_27533', 'rules': [] }, { 'type': 'select', 'name': '客户控制标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'kehukongzhibiaozhi' }, 'key': '1540366556000_50730', 'model': 'select_1540366556000_50730', 'rules': [] }, { 'type': 'select', 'name': '账户分类标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'zhanghufenleibiaozhi' }, 'key': '1540366564000_10862', 'model': 'select_1540366564000_10862', 'rules': [] }, { 'type': 'input', 'name': '是否到期定义', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540366577000_58102' }, 'key': '1540366577000_58102', 'model': 'input_1540366577000_58102', 'rules': [{ 'type': 'string', 'message': '是否到期定义格式不正确' }] }, { 'type': 'input', 'name': '是否形态转移定义', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540366588000_64539' }, 'key': '1540366588000_64539', 'model': 'input_1540366588000_64539', 'rules': [] }, { 'type': 'input', 'name': '存期控制方式', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540366613000_92352' }, 'key': '1540366613000_92352', 'model': 'input_1540366613000_92352', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': false }},
      editData: {},
      values: {},
      remoteFuncs: {
        chanpinleixing(resolve) {
          // 产品类型 select_1539742284000_94944
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品类型').then(response => { resolve(response.data) })
        },

        chanpinzhuangtai(resolve) {
          // 产品状态 select_1539742286000_61292
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品状态').then(response => { resolve(response.data) })
        },

        chanpindinghuobiaozhi(resolve) {
          // 产品定活标志 select_1539742288000_10206
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品定活标志').then(response => { resolve(response.data) })
        },
        /* chanpindinghuobiaozhi(resolve) {
          // 产品定活标志 select_1540366520000_27179
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品定活标志').then(response => { resolve(response.data) })
        },

        chanpinleixing(resolve) {
          // 产品类型 select_1540366525000_56398
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品类型').then(response => { resolve(response.data) })
        },*/

        chanpinshiyongbizhong(resolve) {
          // 产品适用币种 select_1540366534000_49792
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品适用币种').then(response => { resolve(response.data) })
        },

        /* chanpinzhuangtai(resolve) {
          // 产品状态 select_1540366541000_4020
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('产品状态').then(response => { resolve(response.data) })
        },*/

        cunkuanzhonglei(resolve) {
          // 存款种类 select_1540366549000_27533
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('存款种类').then(response => { resolve(response.data) })
        },

        kehukongzhibiaozhi(resolve) {
          // 客户控制标志 select_1540366556000_50730
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('客户控制标志').then(response => { resolve(response.data) })
        },

        zhanghufenleibiaozhi(resolve) {
          // 账户分类标志 select_1540366564000_10862
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('账户分类标志').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>

<style scoped>

</style>
